<!--
 * 用户缴费信息
 *
 * @author Jessica
 * Qdate 2025/10/24
-->
<template>
  <div class="scifi-cost-container">
    <!-- 动态背景元素 -->
    <div class="scifi-bg-elements">
      <div class="floating-orb orb-1"></div>
      <div class="floating-orb orb-2"></div>
      <div class="floating-orb orb-3"></div>
      <div class="grid-lines"></div>
    </div>

    <div class="scifi-content-wrapper">
      <div class="scifi-card">
        <!-- 标题区域 -->
        <div class="scifi-header">
          <div class="logo-container">
            <div class="hologram-logo">
              <div class="logo-core"></div>
              <div class="logo-ring"></div>
            </div>
          </div>
          <h1 class="scifi-title">缴费信息</h1>
          <p class="scifi-subtitle">智能停车缴费系统</p>
        </div>

        <!-- 账户余额区域 -->
        <div class="scifi-balance-panel">
          <div class="panel-header">
            <i class="iconfont icon-stall-fee-menu"></i>
            <span>账户余额</span>
          </div>
          <div class="balance-content">
            <div class="balance-amount" v-if="userInfo.money">
              <span class="currency">￥</span>
              <span class="amount">{{ userInfo.money.toFixed(2) }}</span>
            </div>
            <el-button class="scifi-btn recharge-btn" @click="toPay">
              <div class="btn-content">
                <i class="iconfont icon-add-button"></i>
                <span>立即充值</span>
              </div>
              <div class="btn-glow"></div>
            </el-button>
          </div>
        </div>

        <div class="scifi-divider"></div>

        <!-- 待缴费区域 -->
        <div class="scifi-pending-panel">
          <div class="panel-header">
            <i class="iconfont icon-wait-fee"></i>
            <span>待缴费</span>
          </div>

          <div class="scifi-table-container">
            <div class="table-header">
              <div class="header-item">区域</div>
              <div class="header-item">车位号</div>
              <div class="header-item">停车时长</div>
              <div class="header-item">待缴金额</div>
              <div class="header-item">操作</div>
            </div>

            <div v-if="dRes.length === 0" class="no-data">
              <div class="no-data-text">没有相关记录</div>
            </div>

            <div v-else class="table-body">
              <div v-for="res in dRes" :key="res.id" class="table-row">
                <div class="table-cell">
                  <span class="area">{{ res.stall.stallArea }}</span>
                </div>
                <div class="table-cell">
                  <span class="stall-num">{{ res.stall.stallNum }}</span>
                </div>
                <div class="table-cell">
                  <span class="parking-duration">{{ getParkingDuration(res) }}</span>
                </div>
                <div class="table-cell">
                  <span class="pending-amount">￥{{ feeChange(res).toFixed(2) }}</span>
                </div>
                <div class="table-cell">
                  <el-button class="scifi-btn pay-now-btn" @click="payStall(res)">
                    <div class="btn-content">
                      <i class="iconfont icon-stall-fee-menu"></i>
                      <span>缴费</span>
                    </div>
                    <div class="btn-glow"></div>
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="scifi-divider"></div>

        <!-- 缴费记录区域 -->
        <div class="scifi-records-panel">
          <div class="panel-header">
            <i class="iconfont icon-wait-fee"></i>
            <span>缴费记录</span>
          </div>

          <div class="scifi-table-container">
            <div class="table-header">
              <div class="header-item">区域</div>
              <div class="header-item">车位号</div>
              <div class="header-item">缴费时间</div>
              <div class="header-item">费用</div>
            </div>

            <div v-if="getPaidRecords().length === 0" class="no-data">
              <div class="no-data-text">没有相关记录</div>
            </div>

            <div v-else class="table-body">
              <div v-for="item in getPaidRecords()" :key="item.id" class="table-row">
                <div class="table-cell">
                  <span class="area">{{ item.stall.stallArea }}</span>
                </div>
                <div class="table-cell">
                  <span class="stall-num">{{ item.stall.stallNum }}</span>
                </div>
                <div class="table-cell">
                  <span class="payment-time">{{ formatPaymentTime(item.createTime) }}</span>
                </div>
                <div class="table-cell">
                  <span class="money">缴费：{{ item.money.toFixed(2) }}元</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 充值对话框 -->
    <el-dialog
        title="充值"
        :visible.sync="payShow"
        width="500px"
        center
        class="scifi-dialog"
        @close="payClose"
    >
      <div class="scifi-dialog-content">
        <div class="recharge-input-group">
          <div class="input-icon">
            <i class="iconfont icon-add-button"></i>
          </div>
          <el-input
              v-model.number="payMoney"
              @blur="checkMoney"
              placeholder="充值金额"
              class="scifi-input recharge-input"
          ></el-input>
          <span class="pay-msg" v-if="msgShow">{{ payMsg }}</span>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="payClick" class="scifi-btn confirm-btn">
          <div class="btn-content">
            <span>确认充值</span>
          </div>
          <div class="btn-glow"></div>
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      allStallRes: [],
      userInfo: {},
      payShow: false,
      payMoney: "",
      payMsg: "",
      msgShow: false,
      dRes: [],
    };
  },
  methods: {
    getAllStallRes(uid) {
      axios.get("/api/stall/listUserStallRes?person=" + uid).then((res) => {
        this.allStallRes = res.data.data;
      });
    },
    getUserInfo(uid) {
      axios.get("/api/user/getUserByUid?uid=" + uid).then((res) => {
        this.userInfo = res.data.data;
        if (this.userInfo.username) {
          this.getAllStallRes(this.userInfo.username);
          this.getUserNoPay(this.userInfo.username);
        }
      });
    },
    getUserNoPay(uid) {
      axios.get("/api/stall/allNoPay?person=" + uid).then((res) => {
        this.dRes = res.data.data;
      });
    },
    getUserStallRes(uid) {
      axios.get("/api/stall/allRes?uid=" + uid).then((res) => {
        this.yRes = res.data.data;
      });
    },
    feeChange(stallRes) {
      let startTime = new Date(stallRes.createTime);
      let endTime = stallRes.overTime ? new Date(stallRes.overTime) : new Date();
      let hours = (endTime.getTime() - startTime.getTime()) / 3600000;
      return (Math.floor(hours * 10) / 10) * stallRes.stall.stallMoney;
    },
    getParkingDuration(stallRes) {
      let startTime = new Date(stallRes.createTime);
      let endTime = stallRes.overTime ? new Date(stallRes.overTime) : new Date();
      return this.formatDuration(startTime, endTime);
    },
    formatDuration(startTime, endTime) {
      let totalMs = endTime.getTime() - startTime.getTime();
      let totalSeconds = Math.floor(totalMs / 1000);
      let totalMinutes = Math.floor(totalSeconds / 60);
      let totalHours = Math.floor(totalMinutes / 60);

      let hours = totalHours;
      let minutes = totalMinutes % 60;
      let seconds = totalSeconds % 60;

      if (hours > 0) {
        return `${hours}小时${minutes}分${seconds}秒`;
      } else if (minutes > 0) {
        return `${minutes}分${seconds}秒`;
      } else {
        return `${seconds}秒`;
      }
    },
    getPaidRecords() {
      return this.allStallRes.filter(item => item.money != undefined && item.money != null);
    },
    formatPaymentTime(timeString) {
      if (!timeString) return '';
      return timeString.replace('T', ' ').split('.')[0];
    },
    toPay() {
      this.payMoney = "";
      this.payShow = true;
    },
    checkMoney() {
      if (typeof this.payMoney === "number") {
        this.msgShow = false;
        this.payMsg = "";
      } else {
        this.msgShow = true;
        this.payMsg = "请输入正确的金额数值";
      }
    },
    payClick() {
      if (typeof this.payMoney === "number") {
        const uid = window.sessionStorage.getItem("token");
        axios
            .post("/api/user/userPay", {
              uid: uid,
              money: this.payMoney,
            })
            .then((res) => {
              if (res.data.data) {
                this.$message.success("充值成功！");
                this.getUserInfo(uid);
                this.payClose();
              } else {
                this.$message.error("充值失败，请重新尝试");
              }
            });
      } else {
        this.$message.info("输入金额错误，充值失败！");
        this.payClose();
      }
    },
    payClose() {
      this.payShow = false;
      this.msgShow = false;
      this.payMsg = "";
    },
    async payStall(stallRes) {
      const re = await this.$confirm(
          "该次停车缴费" + this.feeChange(stallRes).toFixed(2) + "元",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      ).catch((err) => err);
      // console.log(re)
      if (re != "confirm") {
        this.$message.info("已取消停车缴费！");
      } else {
        let oa = {};
        oa.pid = stallRes.pid;
        oa.person = stallRes.person;
        oa.stallId = stallRes.stallId;
        oa.money = this.feeChange(stallRes);
        axios.post("/api/stall/payMoneyPerson", oa).then((res) => {
          if (res.data.data.flag) {
            this.$message.success("停车缴费成功！");
            this.getAllStallRes(this.userInfo.username);
            this.getUserNoPay(this.userInfo.username);
          } else {
            this.$message.error(res.data.data.msg);
          }
        });
      }
    },
  },

  mounted() {
    const uid = window.sessionStorage.getItem("token");
    this.getUserInfo(uid);
  },
};
</script>

<style scoped lang="less">
.scifi-cost-container {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #0c0c2e 0%, #1a1a3e 50%, #2d2d5e 100%);
  overflow-x: hidden;
  font-family: 'Arial', sans-serif;
  color: #fff;
}

.scifi-content-wrapper {
  position: relative;
  z-index: 1;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.scifi-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  width: 95%;
  max-width: 1200px;
  box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 20px rgba(0, 255, 255, 0.1);
  animation: glow 2s ease-in-out infinite alternate;
}

.scifi-header {
  text-align: center;
  margin-bottom: 30px;
}

.scifi-title {
  color: #00ffff;
  font-size: 28px;
  font-weight: 300;
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  letter-spacing: 2px;
}

.scifi-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0;
}

.scifi-balance-panel {
  margin-bottom: 20px;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #00ffff;
  font-size: 20px;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.balance-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 25px;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.3);
    transform: translateY(-2px);
  }
}

.balance-amount {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.currency {
  color: #00ffff;
  font-size: 24px;
  font-weight: 500;
}

.amount {
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.recharge-btn {
  background: linear-gradient(135deg, #00ffff, #0080ff);
  color: #000;
  padding: 12px 24px;

  &:hover {
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.4);
  }
}

.scifi-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.5), transparent);
  margin: 25px 0;
}

.scifi-pending-panel,
.scifi-records-panel {
  margin-bottom: 30px;
}

.scifi-table-container {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 120px;
  gap: 1px;
  background: rgba(0, 255, 255, 0.2);
  padding: 0;
}

.scifi-records-panel .table-header {
  grid-template-columns: 1fr 1fr 2fr 1fr;
}

.header-item {
  padding: 15px 10px;
  background: rgba(0, 255, 255, 0.1);
  color: #00ffff;
  font-weight: 500;
  text-align: center;
  font-size: 14px;
}

.table-body {
  max-height: 400px;
  overflow-y: auto;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 120px;
  gap: 1px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
  }

  &:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
  }
}

.scifi-records-panel .table-row {
  grid-template-columns: 1fr 1fr 2fr 1fr;
}

.table-cell {
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.area {
  color: #00ffff;
  font-weight: 500;
}

.stall-num {
  background: rgba(0, 255, 255, 0.1);
  padding: 5px 10px;
  border-radius: 8px;
  color: #00ffff;
  font-weight: 500;
}

.parking-duration {
  color: #409EFF;
  font-weight: 500;
}

.pending-amount {
  color: #ff4d4f;
  font-weight: 500;
}

.payment-time {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

.money {
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(0, 255, 0, 0.1);
  color: #00ff00;
}

.pay-now-btn {
  background: linear-gradient(135deg, #00ff00, #008000);
  color: #000;
  padding: 8px 16px;
  font-size: 12px;

  &:hover {
    box-shadow: 0 5px 15px rgba(0, 255, 0, 0.4);
  }
}

.no-data {
  padding: 60px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}

.no-data-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
}

/* 对话框样式 */
.scifi-dialog {
  :deep(.el-dialog) {
    background: linear-gradient(135deg, #1a1a3e 0%, #2d2d5e 100%);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
  }

  :deep(.el-dialog__title) {
    color: #00ffff;
    font-size: 20px;
  }

  :deep(.el-dialog__header) {
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  }
}

.scifi-dialog-content {
  padding: 20px 0;
}

.recharge-input-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.input-icon {
  color: #00ffff;
  font-size: 24px;
}

.recharge-input {
  :deep(.el-input__inner) {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #fff;
    height: 50px;
    font-size: 18px;
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;

    &::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }

    &:focus {
      border-color: #00ffff;
      box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.08);
    }
  }
}

.pay-msg {
  color: #ff4444;
  font-size: 14px;
  text-align: center;
}

.confirm-btn {
  background: linear-gradient(135deg, #00ffff, #0080ff);
  color: #000;
  width: 100%;
}

/* 按钮通用样式 */
.scifi-btn {
  position: relative;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;

  .btn-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
  }

  &:hover {
    transform: translateY(-2px);

    .btn-glow {
      left: 100%;
    }
  }
}

/* 背景元素样式 */
.scifi-bg-elements {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.floating-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.1;
  animation: float 6s ease-in-out infinite;
}

.orb-1 {
  width: 200px;
  height: 200px;
  background: #00ffff;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.orb-2 {
  width: 150px;
  height: 150px;
  background: #ff00ff;
  top: 60%;
  right: 10%;
  animation-delay: 2s;
}

.orb-3 {
  width: 100px;
  height: 100px;
  background: #ffff00;
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

.grid-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
      linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.3;
}

/* 动画 */
@keyframes glow {
  from {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(0, 255, 255, 0.1);
  }
  to {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 30px rgba(0, 255, 255, 0.3);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-20px) translateX(10px);
  }
}

/* 滚动条样式 */
.table-body::-webkit-scrollbar {
  width: 6px;
}

.table-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.table-body::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 255, 0.3);
  border-radius: 3px;
}

.table-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 255, 0.5);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .table-header,
  .table-row {
    grid-template-columns: 1fr 1fr 1fr 1fr 100px;
  }
  
  .scifi-records-panel .table-header,
  .scifi-records-panel .table-row {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .header-item,
  .table-cell {
    font-size: 12px;
    padding: 10px 5px;
  }
}

@media (max-width: 768px) {
  .scifi-card {
    width: 95%;
    padding: 20px 15px;
  }

  .balance-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .table-header,
  .table-row {
    grid-template-columns: 1fr;
    display: block;
  }
  
  .scifi-records-panel .table-header,
  .scifi-records-panel .table-row {
    grid-template-columns: 1fr;
  }

  .header-item {
    display: none;
  }

  .table-row {
    margin-bottom: 10px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);

    &:hover {
      transform: translateY(-2px);
    }
  }

  .table-cell {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    &:last-child {
      border-bottom: none;
      justify-content: center;
      padding-top: 15px;
    }

    &::before {
      content: attr(data-label);
      color: #00ffff;
      font-weight: 500;
      font-size: 12px;
    }
  }

  .table-cell:nth-child(1)::before { content: "区域"; }
  .table-cell:nth-child(2)::before { content: "车位号"; }
  .table-cell:nth-child(3)::before { content: "停车时长"; }
  .table-cell:nth-child(4)::before { content: "待缴金额"; }
  .table-cell:nth-child(5)::before { content: "操作"; }
  
  .scifi-records-panel .table-cell:nth-child(3)::before { content: "缴费时间"; }
  .scifi-records-panel .table-cell:nth-child(4)::before { content: "费用"; }
}
</style>